<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>c图片切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #c9c9c9;
        }
        
        #content {
            position: relative;
            margin: 80px auto;
            padding: 10px;
            background-color: #fff;
            width: 700px;
            height: 458px;
        }
        
        #content>img {
            width: 100%;
            height: 100%;
        }
        
        #title {
            position: absolute;
            display: flex;
            justify-content: center;
            top: -60px;
            left: 0;
            padding-right: 60px;
            line-height: 60px;
            background-color: #fff;
        }
        
        #title::after {
            content: "";
            position: absolute;
            top: -60px;
            right: -60px;
            width: 0;
            height: 0;
            border: 60px solid;
            border-color: transparent transparent #fff;
        }
        
        a {
            position: absolute;
            display: block;
            top: 186px;
        }
        
        a:nth-of-type(2) {
            right: 10px;
        }
    </style>

</head>

<body>
    <div id="content">
        <h2 id="title">
            <img src="images/logo.png" alt=""> 深圳创维校区环境
        </h2>
        <img v-bind:src="srcs[num]" alt="">
        <a href="#" id="prev" v-on:click="prev" v-show="!(num==0)"><img src="images/prev.png" alt=""></a>
        <a href="#" id="next" v-on:click="next" v-show="!(num==srcs.length-1)"><img src="images/next.png" alt=""></a>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var content = new Vue({
            el: '#content',
            data: {
                srcs: ['images/00.jpg',
                    'images/01.jpg',
                    'images/02.jpg',
                    'images/03.jpg',
                    'images/05.jpg',
                    'images/06.jpg',
                    'images/07.jpg',
                    'images/08.jpg',
                    'images/09.jpg',
                    'images/10.jpg',
                ],
                num: '0',
            },
            methods: {
                prev: function() {
                    this.num--;
                },
                next: function() {
                    this.num++;
                }
            }
        })
    </script>
</body>

</html>